<template>
  <v-card class="mx-auto" max-width="260">
    <v-card-text>
      <!-- 卡片图片标题    :src="cards[0].src"-->
      <div>Article Card</div>
      <p class="text-h4 text--primary">
        <router-link
          :to="{
            name: 'detail',
            params: {
              arcticle: arcticle,
            },
            query:{
              arcticleID:arcticle.id
            }
          }"
        >
          <v-img
            :src="arcticle.imgurl"
            class="white--text align-end"
            gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
            height="200px"
            width="300px"
          >
            <template v-slot:placeholder>
              <v-row class="fill-height ma-0" align="center" justify="center">
                <v-progress-circular
                  indeterminate
                  color="grey lighten-5"
                ></v-progress-circular>
              </v-row>
            </template>

            <v-card-title v-text="arcticle.title"></v-card-title>
          </v-img>
        </router-link>
      </p>
      <p>标签</p>

      <div class="text--primary">
        <v-chip
          class="ma-2"
          color="cyan"
          label
          text-color="white"
          v-for="(tag, i) in arcticle.tagList"
          :key="i"
        >
          <v-icon left> mdi-label </v-icon>
          {{ tag.tagName }}
        </v-chip>
      </div>
    </v-card-text>
    <v-card-actions>
      <v-btn text color="teal accent-4" @click="reveal = true"> Detail </v-btn>
    </v-card-actions>

    <v-expand-transition>
      <v-card
        v-if="reveal"
        class="transition-fast-in-fast-out v-card--reveal"
        style="height: 100%"
      >
        <v-card-text class="pb-0" id="expand_Text">
          <p class="text-h4 text--primary">Time</p>
          <p>
            创建时间： <br />
            {{ arcticle.createDate }}
          </p>
           <p v-if="arcticle.modifyDate">
            最后修改时间： <br />
            {{ arcticle.modifyDate }}
          </p>
        </v-card-text>
        <v-card-actions class="pt-0">
          <v-btn text color="teal accent-4" @click="reveal = false">
            Close
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-expand-transition>
  </v-card>
</template>


<script>
export default {
  data: () => ({
    reveal: false,
  }),
  props: ["arcticle"],
};
</script>


<style scoped>
.v-card--reveal {
  bottom: 0;
  opacity: 1 !important;
  position: absolute;
  width: 100%;
}

#expand_Text {
  height: 90%;
  overflow: auto;
  overflow-y: hidden;
}
</style>